import React, { useEffect, useState } from 'react'
import api from '@/api'
import {
    Space, Table, Tag, Image, Button, Drawer, message,
    Cascader,
    Checkbox,
    DatePicker,
    Form,
    Input,
    InputNumber,
    Radio,
    Card,
    Switch,
    TreeSelect,
    Upload,
    Pagination
} from 'antd';
import type { ColumnsType } from 'antd/es/table';

import { SearchOutlined, EditOutlined, CloseOutlined, PlusOutlined } from '@ant-design/icons';
const { RangePicker } = DatePicker;
const { TextArea } = Input;
export default function User() {
    useEffect(() => {
        shopList(send)
    }, [])
    const [form] = Form.useForm();
    const [open, setOpen] = useState(false);
    const [isadd, setisadd] = useState(false);
    const [write, setwrite] = useState(false);
    const [total, setTotal] = useState()
    const [list, setlist] = useState([{
        servegoodsname: "",
        price: '',
        createdAt: '',
        goodid: null,
        serveid: null,
        state: 0,
        id: null,
        userid: null
    }])
    const [send, setsend] = useState({
        pageSize: 5,
        currentPage: 1,
        id: null,
        type: 1,
    })
    const shopList = async (params: any) => {
        const res = await api.good.getOrder(params)
        setlist(res.data.data)
        console.log(res.data.recordCount);
        setTotal(res.data.recordCount)

    }
    const onClose = () => {
        setOpen(false);
    };

    interface DataType {
        key: string;
        name: string;
        age: number;
        address: string;
        tags: string[];
    }
    const adduser = () => {
        setisadd(true)
        form.setFieldsValue({
            servegoodsname: "",
            price: '',
            createdAt: '',
            goodid: null,
            serveid: null,
            state: 0,
            id: null,
            userid: null
        });
        setOpen(true);
    }
    async function insertdetail(arg: any) {
        let arg1 = arg
        let i = list.findIndex((value: any) => value.id == arg1)
        setisadd(false)
        form.setFieldsValue({
            servegoodsname: list[i].servegoodsname,
            price: list[i].price,
            createdAt: list[i].createdAt,
            goodid: list[i].goodid,
            serveid: list[i].serveid,
            state: list[i].state,
            id: list[i].id,
            userid: list[i].userid
        });
        setOpen(true);
    }
    const getDetail = async (arg: any) => {
        insertdetail(arg)
        setwrite(false)

    }

    const setDetail = (arg: any) => {
        insertdetail(arg)
        setwrite(true)

    }
    const deletethis = async (arg: any) => {
        const res = await api.good.deleteOrder({ type: 1, id: arg })
        if (res.data.code == 200) {
            message.success('删除成功')
            shopList(send)
        }
    }
    const normFile = (e: any) => {
        if (Array.isArray(e)) {
            return e;
        }
        return e?.fileList;
    };
    async function changeState(arg: any, idx: any) {
        console.log(idx.id, idx);
        if (idx.isok == 0) {
            const res = await api.good.updateIsok({ isok: 1, id: idx.id })
            if (res.data.code == 200) {
                message.success('更改成功')
                shopList(send)
            }
        } else {
            const res = await api.good.updateIsok({ isok: 0, id: idx.id })
            if (res.data.code == 200) {
                message.success('更改成功')
                shopList(send)
            }
        }
    }
    const columns: ColumnsType<any> = [
        {
            title: '用户id',
            dataIndex: 'userid',
            render: (text) => <a>{text}</a>,
        },
        {
            title: '服务类型',
            dataIndex: 'servegoodsname',
            render: (text) => <a>{text}</a>,
        },
        {
            title: '服务员工',
            dataIndex: 'serveid',
            render: (text) => <a>{text}</a>,
        },
        {
            title: '订单价格',
            dataIndex: 'price',
            render: (text) => <a>{text}</a>,
        },
        {
            title: '订单状态',
            dataIndex: 'state',
            key: 'phone',
            render: (record, idx) => (
                <label > <Switch checkedChildren="完成" unCheckedChildren="未完成" onChange={() => { changeState(record, idx) }} checked={idx.isok == 1 ? true : false} />
                </label>

            ),
        },
        {
            title: '创建时间',
            dataIndex: 'createdAt',
            render: (text) => <a>{text.slice(0, 16)}</a>,
        },
        {
            title: '操作',
            dataIndex: 'id',
            render: (record) => (
                <label >
                    <Button type="primary" shape="circle" icon={<SearchOutlined />} onClick={() => getDetail(record)} style={{ margin: '0 10px' }}></Button>
                    <Button type="primary" danger shape="circle" icon={<CloseOutlined />} onClick={() => deletethis(record)} style={{ margin: '0 10px' }}></Button>
                </label>
            ),
        },
    ]
    async function submit(arg: any) {
        setOpen(false)
    }
    function pageChange(args: any) {
        shopList({ ...send, currentPage: args })
        setsend({ ...send, currentPage: args })
    }

    return (
        <div>
            <Card>
                {list ?
                    <>
                        {/* <Button style={{ position: 'absolute', right: '10px', zIndex: '2', }} type="primary" danger onClick={adduser} >+</Button> */}
                        <Table columns={columns} dataSource={list} pagination={false} />
                        <Drawer title="订单" placement="right" onClose={onClose} open={open}>
                            <Form
                                labelCol={{ span: 4 }}
                                wrapperCol={{ span: 14 }}
                                layout="horizontal"
                                style={{ maxWidth: 600 }}
                                onFinish={submit}
                                form={form}
                            >
                                <Form.Item label="编号" name='id'>
                                    <Input disabled={true} />
                                </Form.Item>
                                <Form.Item label="用户id" name='userid' >
                                    <Input disabled={true} />
                                </Form.Item>

                                <Form.Item label="商品名称" name='name'>
                                    <Input />
                                </Form.Item>
                                <Form.Item label="订单状态" name='state'>
                                    <Radio.Group >
                                        <Radio value="0"> 完成 </Radio>
                                        <Radio value="1"> 未完成 </Radio>
                                    </Radio.Group>
                                </Form.Item>
                                <Button htmlType='submit'>确定</Button>
                            </Form>
                        </Drawer>
                        <Pagination total={total} current={send.currentPage} pageSize={send.pageSize} onChange={pageChange}></Pagination>
                    </> : <></>}
            </Card>
        </div>
    )
}
